import Vue from "vue";

import VueRouter from "vue-router";

Vue.use(VueRouter);

import { readToken, removeToken } from "@/utils/auth";
import store from "@/store"

import routes from "./routes";
import { Message } from "element-ui"
// 对 push 的增强
// 1. 备份 push方法
// const originPush = VueRouter.prototype.push;

// 2. 重写 push 方法 增强
// VueRouter.prototype.push = function (location, okCallback, errorCallback) {
//     if (okCallback || errorCallback) {
//         originPush.call(this.location, okCallback, errorCallback)
//     } else {
//         originPush.call(this.location).catch(() => { })
//     }
// }


// 对 replace 的增强
// 1. 备份 replace 方法
// const originReplace = VueRouter.prototype.replace;

// 2. 重写 replace 方法 增强
// VueRouter.prototype.replace = function (location, okCallback, errorCallback) {
//     if (okCallback || errorCallback) {
//         originReplace.call(this.location, okCallback, errorCallback)
//     } else {
//         originReplace.call(this.location).catch(() => { })
//     }
// }


// 封装 增强方法
function enhance(source, type) {
    // 1. 备份 方法
    const origin = source.prototype[type];

    // 2. 重写方法  进行增强
    source.prototype[type] = function (location, okCallback, errorCallback) {
        if (okCallback || errorCallback) {
            origin.call(this, location, okCallback, errorCallback);
        } else {
            origin.call(this, location).catch(() => {})
        }
    }
}

enhance(VueRouter, "push");
enhance(VueRouter, "replace")

let router = new VueRouter({
    mode: "history",  // 路由模式
    routes,  // 路由配置对象
    scrollBehavior(to, from, savedPosition) {  // 滚动行为

        // to :  即将要进入的路由对象
        // from :现在要离开的路由对象
        // savedPosition  保存上一次滚动条的位置
        // 1. 【正常项目跳转，router-link/编程式路由导航】 值为 null
        // 2. 通过浏览器前进后退，此时有值，值就是上一次滚动条的位置{x:"",y:""}
        // console.log(to);
        // console.log(from);
        // console.log(savedPosition);
        if (savedPosition) {
            // 通过浏览器前进后退，此时有值，值就是上一次滚动条的位置{x:"",y:""} 保留位置
            return savedPosition;
        } else {
            // 【正常项目跳转，router-link/编程式路由导航】 值为 null
            return { x: 0, y: 0 }
        }
    }
})

// 需要验证的登录路由
let isLogin = ["/trade","/pay","/paysuccess","/center"]

// 全局前置路由守卫
router.beforeEach(async (to, from, next) => {
    // to   : 即将要进入的路由对象
    // from : 现在要离开的路由对象
    // next : 确认要进入的路由对象

    //获取token
    let token = readToken();
    //判断是否存在token
    if (token) {
        // token存在，说明登录。  获取 vuex 中的 userInfo
        // 获取 vuex 中的 userInfo

        let userInfo = store.state.user.userInfo;
        // 判断 userInfo 是否存在数据
        if (userInfo.id) {
            // token 存在，vuex 中的 用户信息也存在，直接放行。
            // console.log("token 存在,vuex 中的 用户信息也存在，直接放行。");
            next();
        } else {
            // token 存在，vuex 中的 用户信息不存在,初次登录或刷新了浏览器，发送请求，获取用户信息
            // console.log("token 存在,vuex 中的 用户信息不存在,初次登录或刷新了浏览器，发送请求，获取用户信息")
            try {
                // token有效。成功获取到了 用户信息。直接放行
                // console.log("token有效。成功获取到了 用户信息,将用户数据存入vuex。直接放行")
                await store.dispatch("user/getUserInfo");
                next();
            } catch (error) {
                //    token过期，删除token，跳转至登录页面。
                // console.log("token过期,删除token,跳转至登录页面。")
                // 删除token
                removeToken();
                // 跳转至登录页面
                next("/login")
            }
        }

    } else {
        // 不存在token， 说明没有登录，其他路由可以正常访问，【交易 支付 订单 个人中心。。】不允许方法
        // console.log("不存在token,说明没有登录,其他路由可以正常访问，【交易 支付 订单 个人中心。。】不允")
        if (isLogin.includes(to.path)) {
            Message.error("未登录,请先登录")
            next("/login");
        } else {
            next();
        }
    }
})

export default router;